import {designComponent, PropType} from "@peryl/react-compose";
import {Box, Icon} from "plain-design";
import {getFunctionValue} from "@peryl/utils/getFunctionValue";

export const PageCardStarter = designComponent({
  props: {
    title: { type: String },
    starterOptions: { type: Array as PropType<iPageCardStarterOption[]>, required: true },
  },
  setup({ props }) {
    return () => (
      <Box className="page-card-starter" key="starter">
        <span>{props.title}</span>
        {props.starterOptions.map((option, index) => (
          <Box className="page-card-starter-item" onClick={option.handler} key={index}>
            {typeof option.icon === "function" ? option.icon() : <Icon icon={option.icon}/>}
            <span>{getFunctionValue(option.label)}</span>
          </Box>
        ))}
      </Box>
    );
  },
});


export interface iPageCardStarterOption {
  label: string | (() => string),
  icon: string | (() => any),
  handler: () => void,
}
